import {
  createStoreBindings
} from "mobx-miniprogram-bindings";
import {
  callLogsFilterStore
} from "../../store/callLogsFilterStore";
import {
  userSelectStore
} from "../../store/userSelectStore";
const app = getApp()
import P from 'wl-pinyin'

function isAlphabet(character) {
  // 使用正则表达式检查是否是英文字母
  return /^[a-zA-Z]/.test(character);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 要返回的页面路径
    backToPath: '',
    multiple: true,
    key: "",
    indexList: [],
    dataList: [],
    // 多选值
    checkBoxValue: [],
    // 单选值
    radioValue: [],
    currentRadioValue: null,
    userData: [],
    keywords: '',
    eventChannel: null
  },
  onChangeKeywords({
    detail
  }) {
    const keyword = detail.value
    if (keyword) {
      const filters = wx.$_.filter(this.data.userData, (item) => {
        return item.label.indexOf(keyword) > -1
      })
      this.initData(filters)
    } else {

      this.initData(this.data.userData)

    }

  },
  onConfirm() {
    const {
      backToPath
    } = this.data
    const {
      userData,
      checkBoxValue,
      radioValue
    } = this.data
    let data = null
    if (this.data.multiple) {
      data = userData.filter(item => {
        return checkBoxValue.includes(item.value)
      })
    } else {
      data = userData.filter(item => {
        return radioValue.includes(item.value)
      })
    }
    if (this.data.key) {
      this.setUserSelectStore(data, this.data.key)
    }
    this.data.eventChannel.emit('confirm', data)
    if (backToPath) {
      wx.redirectTo({
        url: `${backToPath}`,
      })
    }

  },
  onCancel() {
    if (this.data.backToPath) {
      wx.redirectTo({
        url: `${this.data.backToPath}`,
      })
    } else {
      wx.navigateBack()
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {


    const {
      key,
      multiple,
      backToPath,
    } = options
    this.storeBindings = createStoreBindings(this, {
      store: userSelectStore,
      fields: ["choseUserData"],
      actions: ["setUserSelectStore"],
    });
    this.storeBindings1 = createStoreBindings(this, {
      store: callLogsFilterStore,
      fields: ["serverUserList"],
    });


    const is = {
      'false': false,
      'true': true
    }

    this.setData({
      multiple: is[multiple],
      backToPath: backToPath,
      key: key,
      eventChannel: this.getOpenerEventChannel()

    })
    this.initData()
  },
  initData(data) {
    let person = {}
    let arr = []
    if (data) {
      arr = data
    } else {
      arr = app.globalData.userList
    }
    this.setData({
      userData: arr
    })
    arr.forEach(item => {
      let first = null
      item['label'] = item.nickName
      item['value'] = item.userId
      // 判断是否英文开头 
      if (isAlphabet(item.nickName)) {
        first = item.nickName.slice(0, 1)
        first = first.toUpperCase()
      } else {
        first = P.getFirstLetter(item.nickName).slice(0, 1)
      }
      if (person[first]) {
        person[first].push(item)
      } else {
        person[first] = [item]
      }
    })
    const list = []
    for (let i in person) {
      list.push({
        index: i,
        children: person[i]
      })
    }

    list.sort((a, b) => {
      if (a.index < b.index) {
        return -1; // a 在 b 前面
      } else if (a.index > b.index) {
        return 1; // a 在 b 后面
      } else {
        return 0; // 顺序无变化
      }
    })
    console.log(arr, 'arr');
    this.setData({
      userData: arr,
      dataList: list,
      indexList: list.map(item => item.index)
    })
  },

  changeCheckBox(event) {
    this.setData({
      checkBoxValue: event.detail.value,
    });
  },
  changeRadio(event) {
    const {
      value
    } = event.detail;
    this.setData({
      currentRadioValue: value,
      radioValue: [value]
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})